<template>
    <div class="like">
<!-- 插槽的使用 -->
    <Card>
        <span>猜你喜欢</span>
    </Card>
   <ul>
       <li
        v-for='(item,index) in likeList'
        :key='index'
        @click="goDetail"
       >
           <h2>
               <img :src="item.imgUrl" alt="">
           </h2>
           <h3>{{item.name}}</h3>
           <div>
               <span>￥</span>
               <b>{{item.price}}</b>
           </div>
       </li>
   </ul>
    </div>
</template>
<script>
import Card from '@/components/home/Card.vue'
export default {

    components:{
            Card

        },
          data(){
        return{
            likeList:[
                {
                    id:1,
                    name:'可折叠桌椅',
                    price:'59',
                    imgUrl:'./images/recommend1.jpg'
                },
                 {
                    id:2,
                    name:'透明TPU果冻包',   
                    price:'129',
                    imgUrl:'./images/recommend2.jpg'
                },
                 {
                    id:3,
                    name:'厨房碗碟收纳箱',
                    price:'19.9',
                    imgUrl:'./images/like3.jpg'
                },
                 {
                    id:4,
                    name:'ins风盘子',
                    price:'15.9',
                    imgUrl:'./images/like2.jpg'
                },
                
            ]

        }
        
    },
    methods:{
        goDetail(){
            this.$router.push({
                path:'/detail'
            })
        }
    }

}
</script>
<style scoped>
.like ul{
    display: flex;
    flex-wrap: wrap;
   
}
.like ul li{
    display: flex;
    flex-direction: column;
     justify-content: center;
     align-items: center;
    width:50%;
    background-color: rgb(053, 103, 083);
    border-radius:16px ;


}
.like ul li > div{
    padding: 6px;
    width: 93%;
    text-align: left;
}
.like ul li > div span{
    font-size: 16px;
    color: rgb(241, 193, 133);
}
.like ul li > div b{
    font-size: 16px;
    color: rgb(241, 193, 133);
}
.like h3{
    padding: 4px;
    width: 96%;
    font-weight: 600;
    width: 100%;
    font-size: 13px;
    color:  rgb(204, 202, 190);
}

.like img{
    width:176px;
    height: 176px;
     border-radius:16px ;
}

</style>>

